<template>
	<view>
		<view class="mh-form">
			<view class="mh-form-title">
				<view class="mh-form-title-left">
					<view class="mh-form-title-color"></view>
					<view class="mh-form-title-txt">维保单</view>
				</view>
				<view class="mh-form-title-right" @click="toDeviceInfo()">
					基本信息 >
				</view>
			</view>
			<view class="mh-form-card">
				<view class="mh-form-item border">
					<view class="mh-form-item-label width-196">
						设备是否正常：
					</view>
					<u-radio-group v-model="detailInfo.equipmentNormalFlag" disabled>
						<u-radio :name="1">是</u-radio>
						<u-radio :name="0">否</u-radio>
					</u-radio-group>
				</view>
				<view class="mh-form-item border">
					<view class="mh-form-item-label width-196">
						是否完成：
					</view>
					<u-radio-group v-model="detailInfo.completedFlag" disabled>
						<u-radio :name="1">是</u-radio>
						<u-radio :name="0">否</u-radio>
					</u-radio-group>
				</view>
				<view class="mh-form-item-textarea" v-if="detailInfo.completedFlag == 0">
					<view class="mh-form-item-label width-196">
						维保进度：
					</view>
					<u-input :value="detailInfo.progress" type="textarea" placeholder="" disabled></u-input>
				</view>
				<view class="mh-form-item-textarea">
					<view class="mh-form-item-label width-196">
						维保内容：
					</view>
					<u-input :value="showNames(contentList, detailInfo.maintenanceContent, 'id', 'name')"
						type="textarea" placeholder="" disabled></u-input>
				</view>
			</view>

			<view class="mh-form-card">
				<view class="mh-form-item-upload">
					<view class="mh-form-item-label width-224">
						维保前照片：
					</view>
					<view class="mh-form-item-upload-box">
						<view class="mh-form-item-upload-box-item"
							v-for="(item, index) in detailInfo.preMaintenanceImageList" :key="index"
							@click="$common.previewImg(detailInfo.preMaintenanceImageList.map(item=>item.previewUrl), index)">
							<u-image :src="item.previewUrl" width="150rpx" height="150rpx"></u-image>
						</view>
					</view>
				</view>
			</view>

			<view class="mh-form-card">
				<view class="mh-form-item-upload">
					<view class="mh-form-item-label width-224">
						维保后照片：
					</view>
					<view class="mh-form-item-upload-box">
						<view class="mh-form-item-upload-box-item"
							v-for="(item, index) in detailInfo.postMaintenanceImageList" :key="index"
							@click="$common.previewImg(detailInfo.postMaintenanceImageList.map(item=>item.previewUrl), index)">
							<u-image :src="item.previewUrl" width="150rpx" height="150rpx"></u-image>
						</view>
					</view>
				</view>
			</view>

			<view class="mh-form-card">
				<view class="mh-form-item border">
					<view class="mh-form-item-label width-196">
						负责人：
					</view>
					<view>{{detailInfo.responsiblePersonStr}}</view>
				</view>
				<view class="mh-form-item border">
					<view class="mh-form-item-label width-196">
						维保人：
					</view>
					<view>{{detailInfo.maintenancePersonStr}}</view>
				</view>
				<view class="mh-form-item">
					<view class="mh-form-item-label width-196">
						维保时间：
					</view>
					<view>{{detailInfo.maintenanceTime}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detailInfo: {},
				contentList: []
			}
		},
		onLoad(option) {
			this.getInfo(option.id)
		},
		computed: {
			showNames() {
				return (list, value, key, name) => {
					if (list.length > 0 && value.length > 0) {
						return list.filter(item => value.includes(item.id)).map(item => item[
							name]).join(',')
					} else {
						return ''
					}
				}
			}
		},
		methods: {
			getInfo(id) {
				this.$u.api.maintenanceGetOne({
					id
				}).then(res => {
					res.preMaintenanceImageList = !res.files ? [] : res.files.filter(item => item.bizType ==
						'preMaintenanceImage') || []
					res.postMaintenanceImageList = !res.files ? [] : res.files.filter(item => item
						.bizType == 'postMaintenanceImage') || []
					res.maintenanceContent = !res.maintenanceContent ? [] : res.maintenanceContent
					this.detailInfo = res
					this.$u.api.equipmentGetOne({
						id: res.equipmentId
					}).then(ress => {
						this.$u.api.getContentList({
							parentId: ress.categoryId
						}).then(response => {
							this.contentList = response
						})
					})
				})
			},
			toDeviceInfo() {
				uni.navigateTo({
					url: '/pages/home/deviceInfo?equipmentId=' + this.detailInfo.equipmentId
				})
			},
		}
	}
</script>
<style>
	page {
		background-color: #F5F7FA;
	}
</style>
<style lang="scss" scoped>
	.nav-right {
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 45rpx;
		margin-right: 45rpx;
	}
</style>